<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/28
  Time: 10:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>Layui示例</title>
        <!--引入layui样式文件-->
        <link rel="stylesheet" href="layui/css/layui.css">

    </head>
    <body>
        <button id="new_btn">新建</button>
        <table id="mytable" lay-filter="tb_event"></table>
    </body>

    <!--引入layui.js-->
    <script src="layui/layui.js"></script>
    <script type="text/html" id="number">
        {{d.LAY_INDEX }}
    </script>
    <script type="text/html" id="mytool">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm layui-btn-normal"
                    lay-event="edit">编辑</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger"
                    lay-event="delete">删除</button>
        </div>
    </script>
    <script>
        var $;
        var myReload;
        layui.use(['layer','table','jquery'],function(){
            var table = layui.table;
            $ = layui.jquery;
            var  layer = layui.layer;
            //表格的渲染
            table.render({
                elem:"#mytable",  //渲染表格的id
                url:"getDeptByPage",//后台数据的请求接口
                cols:[[
                    {field:'index',title:"序号",width:120,templet:"#number"},
                    {field:'deptno',title:"部门编号",width:120},
                    {field:'dname',title:"部门名",width:180},
                    {field:'loc',title:"所在地",width:180},
                    {title:"操作",toolbar:"#mytool",width:160}
                ]],
                even:true, //斑马线背景色
                page:true //开启分页组件
            });

            //表格重载
            myReload = function reloadTable(){
                table.reload('mytable',{page:{curr:1}})
            }

            //工具栏的响应事件
            table.on('tool(tb_event)',function (obj) {
                var data = obj.data;
                if(obj.event=='edit'){
                    //弹出对话框层
                    layer.open({
                        type:2,
                        area:['400px','300px'],
                        fixed:false,
                        content:'editdept.jsp',
                        success:function (layero,index) {
                            //往对话框传值
                            var body = layer.getChildFrame('body',index);
                            body.find("#deptno").val(data.deptno);
                            body.find("#dname").val(data.dname);
                            body.find("#loc").val(data.loc);
                        }
                    });
                }else if(obj.event=='delete'){

                    $.ajax({
                        url:"delDeptById",//请求的后台接口
                        type:"post",
                        data:{id:data.deptno},
                        dataType:"json",
                        success:function (param) {
                            if(param.code==0){
                                //删除成功
                                alert(param.msg);
                                myReload();
                            }else{
                                alert(param.msg);
                            }
                        },
                        error:function(){
                            alert("操作失败，请稍后重试");
                        }
                    });
                }
            })

            $("#new_btn").on('click',function () {
                //弹出对话框层
                layer.open({
                    type:2,
                    area:['400px','300px'],
                    fixed:false,
                    content:'adddept.jsp',
                    success:function (layero,index) {

                    }
                });
            });

        });

        function updateDept(id,dname,loc) {
            $.ajax({
                url:"editDept",//请求的后台接口
                type:"post",
                data:{deptno:id,dname:dname,loc:loc},
                dataType:"json",
                success:function (param) {
                    if(param.code==0){
                        //修改成功
                        alert(param.msg);
                        myReload();
                    }else{
                        alert(param.msg);
                    }
                },
                error:function(){
                    alert("操作失败，请稍后重试");
                }
            });
        }

        function addDept(dname,loc) {
            $.ajax({
                url:"addDept",//请求的后台接口
                type:"post",
                data:{dname:dname,loc:loc},
                dataType:"json",
                success:function (param) {
                    if(param.code==0){
                        //修改成功
                        alert(param.msg);
                        myReload();
                    }else{
                        alert(param.msg);
                    }
                },
                error:function(){
                    alert("操作失败，请稍后重试");
                }
            });
        }

    </script>
</html>
